<template>
  <a_page>
    <div class="relative">
      <!-- 工具栏ref{{ 工具栏ref }} -->
      <!-- 顶部间距style{{ 顶部间距style }} -->
      <div class="工具栏" ref="工具栏ref" :class="[工具栏class]">
        <el-button type="primary" icon="plus" @click="详情窗口.初始化()">增加</el-button>
        <el-button type="danger" icon="delete" style="margin-left: 10px;" :disabled="!a.选中组.length"
          @click="list.删()">删除</el-button>
      </div>
      <div class="gva-list-box" :style="顶部间距style">
        <el-table ref="multipleTable" border tooltip-effect="dark" :data="单项组" row-key="id"
          @selection-change="list.选中变了" @sort-change="list.sortChange" :default-sort="a.默认排序">
          <el-table-column type="selection" width="40" />
          <el-table-column align="left" label="id" width="80">
            <template #default="scope">
              <el-button type="primary" link icon="link" @click="详情窗口.初始化(scope.row)">{{ scope.row.id
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="图片" width="200">
            <template #default="scope">
              <el-image @click="详情窗口.初始化(scope.row)" preview-teleported style="width: 100px; height: 100px"
                :src="getUrl(scope.row.图片)" fit="cover" />
            </template>
          </el-table-column>

          <!-- 末尾列 -->
          <el-table-column align="left" sortable label="修改时间" prop="UpdatedAt" width="180">
            <template #default="scope">{{ formatDate(scope.row.UpdatedAt) }}</template>
          </el-table-column>
          <el-table-column align="left" label="操作" fixed="right">
            <template #default="scope">
              <el-button type="danger" link icon="delete" @click="list.删(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="a.page" :page-size="a.pageSize"
            :page-sizes="a.可选页面容量" :total="a.total" @current-change="list.跳转页面" @size-change="list.改单页条数" />
        </div>
      </div>


      <!-- <el-drawer destroy-on-close size="800" v-model="弹窗否" :show-close="false" :before-close="详情窗口.关窗">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ !单项.id ? '新增ing' : '编辑ing' }}</span>
          <div>
            <el-button type="primary" @click="详情窗口.提交">确 定</el-button>
            <el-button @click="详情窗口.关窗">取 消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="单项" label-position="top" ref="formRef" :rules="rule" label-width="80px">
        <el-form-item label="图片:" prop="图片">
          <SelectImage v-model="单项.图片" file-type="image" />
        </el-form-item>
      </el-form>
    </el-drawer> -->
    </div>
    <a详情 ref="详情窗口" :list="list"></a详情>
  </a_page>
</template>

<script setup>
import a_page from '@/components/a_page.vue';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

import use工具栏 from '@/amtf/hooks/工具栏';
const { 工具栏ref, 工具栏class, 顶部间距style } = use工具栏()

import use from '@/amtf/hooks/uselist';
const list = use()
const { a, 单项组 } = list

const 详情窗口 = ref()
// import use详情窗口 from '@/amtf/hooks/use详情窗口';
// const 详情窗口 = use详情窗口({ 查多个: list.查多个 })
// const { 弹窗否, 单项, 初始化, formRef, rule } = 详情窗口

import a详情 from './详情-抽屉式.vue'
// const 弹窗否 = ref(false)

import { getUrl } from '@/utils/image'
// 图片选择组件
// 全量引入格式化工具 请按需保留

import SelectImage from '@/components/selectImage/selectImage.vue'
import { getDictFunc, formatDate, formatBoolean, filterDict, filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'

// 查多个()
</script>

<style lang="scss" scoped></style>
